import { Message, ApiProvider, DeepSeekModel } from "@/store/useAppStore"
import OpenAI from "openai"

// 模拟不同 AI 服务商的独特回复风格，现在返回 HTML 格式
const getMockResponse = (api: ApiProvider, lastUserMessage: string): ReadableStream => {
	const responses: Record<string, string[]> = {
		OpenAI: `好的，我是 **OpenAI** (模拟)。关于"${lastUserMessage}"，我为您生成了 HTML 排版代码：

\`\`\`html
<div style="max-width: 600px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif;">
  <h2 style="color: #1976d2; text-align: center; margin-bottom: 20px; font-size: 24px;">
    ${lastUserMessage}
  </h2>
  <div style="background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); padding: 20px; border-radius: 8px; margin-bottom: 20px;">
    <p style="line-height: 1.8; margin-bottom: 16px; color: #333;">
      这是一个精美的微信公众号排版示例，采用了现代化的设计风格。
    </p>
    <ul style="padding-left: 20px; line-height: 1.8; color: #555;">
      <li style="margin-bottom: 8px;">优雅的渐变背景</li>
      <li style="margin-bottom: 8px;">清晰的字体层次</li>
      <li style="margin-bottom: 8px;">适配移动端的响应式设计</li>
    </ul>
  </div>
</div>
\`\`\``.split(""),
		Claude: `你好，我是 **Claude** (模拟)。我为"${lastUserMessage}"创建了结构化的 HTML 排版：

\`\`\`html
<article style="max-width: 650px; margin: 0 auto; padding: 20px; font-family: 'Helvetica Neue', Arial, sans-serif;">
  <header style="text-align: center; margin-bottom: 30px; border-bottom: 2px solid #e0e0e0; padding-bottom: 20px;">
    <h1 style="color: #2c3e50; font-size: 28px; font-weight: 300; margin: 0;">
      ${lastUserMessage}
    </h1>
  </header>
  <section style="background: #f8f9fa; padding: 25px; border-left: 4px solid #3498db; margin: 20px 0;">
    <p style="margin: 0; line-height: 1.7; color: #34495e; font-size: 16px;">
      精心设计的内容排版，注重可读性和视觉层次。采用简洁的设计语言，突出内容本身的价值。
    </p>
  </section>
</article>
\`\`\``.split(""),
		Gemini: `我是 **Gemini** (模拟)。为"${lastUserMessage}"设计了创意 HTML 排版：

\`\`\`html
<div style="max-width: 580px; margin: 0 auto; background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,0.1); border-radius: 12px; overflow: hidden;">
  <div style="background: linear-gradient(45deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px 20px; text-align: center;">
    <h2 style="margin: 0; font-size: 22px; font-weight: 500;">
      ${lastUserMessage}
    </h2>
  </div>
  <div style="padding: 30px 20px;">
    <div style="display: flex; align-items: center; margin-bottom: 20px;">
      <div style="width: 4px; height: 40px; background: #667eea; margin-right: 15px; border-radius: 2px;"></div>
      <p style="margin: 0; color: #555; line-height: 1.6; font-size: 15px;">
        创新的卡片式设计，结合现代色彩搭配，为您的内容增添视觉吸引力。
      </p>
    </div>
  </div>
</div>
\`\`\``.split(""),
		通义千问: `我是**通义千问** (模拟)。为"${lastUserMessage}"提供规范的 HTML 排版：

\`\`\`html
<div style="max-width: 600px; margin: 0 auto; font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;">
  <h3 style="color: #d32f2f; text-align: center; font-size: 20px; margin-bottom: 25px; position: relative;">
    ${lastUserMessage}
    <span style="display: block; width: 60px; height: 3px; background: #d32f2f; margin: 10px auto;"></span>
  </h3>
  <div style="background: #fff3e0; border: 1px solid #ffb74d; border-radius: 6px; padding: 20px; margin: 20px 0;">
    <p style="margin: 0 0 15px 0; line-height: 1.8; color: #424242;">
      总分总结构的内容排版，重视逻辑性和条理性。
    </p>
    <p style="margin: 0; line-height: 1.8; color: #424242; text-align: center; font-weight: 500;">
      — 专业 · 简洁 · 实用 —
    </p>
  </div>
</div>
\`\`\``.split(""),
		智谱AI: `**智谱AI** (模拟) 在此。为"${lastUserMessage}"设计了互动式 HTML 排版：

\`\`\`html
<div style="max-width: 620px; margin: 0 auto; background: #fafafa; border-radius: 10px; padding: 25px;">
  <div style="text-align: center; margin-bottom: 25px;">
    <h2 style="color: #1565c0; margin: 0 0 10px 0; font-size: 24px;">
      ${lastUserMessage}
    </h2>
    <div style="width: 80px; height: 2px; background: linear-gradient(90deg, #1565c0, #42a5f5); margin: 0 auto;"></div>
  </div>
  <div style="background: white; border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
    <p style="line-height: 1.7; margin: 0; color: #37474f; text-align: justify;">
      智能化的排版设计，融合现代UI元素。注重用户体验和视觉效果的平衡，创造更好的阅读体验。
    </p>
  </div>
</div>
\`\`\``.split("")
	}

	const selectedResponse = responses[api] || responses["OpenAI"]

	return new ReadableStream({
		async start(controller) {
			const encoder = new TextEncoder()
			for (const char of selectedResponse) {
				await new Promise(resolve => setTimeout(resolve, 20))
				controller.enqueue(encoder.encode(char))
			}
			controller.close()
		}
	})
}

// 为 Deepseek 创建一个 OpenAI 客户端实例
const deepseek = new OpenAI({
	apiKey: process.env.DEEPSEEK_API_KEY,
	baseURL: "https://api.deepseek.com"
})

// 为 SiliconFlow 创建一个 OpenAI 客户端实例
const siliconflow = new OpenAI({
	apiKey: process.env.SILICONFLOW_API_KEY,
	baseURL: "https://api.siliconflow.cn/v1"
})

// 系统提示词 - 指导 AI 返回 HTML 格式
const HTML_SYSTEM_PROMPT = `
角色定义​：
你是「公众号文章智能排版助手」（简称「排版小助手」），核心定位是基于用户需求与内容特性，为公众号文章提供专业、美观且符合阅读习惯的排版方案。你需要扮演「内容视觉翻译官」的角色——将文字内容转化为符合用户品牌调性、用户阅读场景（手机端）的视觉化表达，同时兼顾信息传递效率与用户体验。

​核心职能：​
你的主要职能围绕「内容理解-风格匹配-视觉设计-规范校验」四大环节展开，具体包括：

1. ​内容结构分析​（基础前提）
•自动解析用户提供的文章内容（标题/正文/引言/结尾/重点标注等），识别内容类型（如干货科普、情感故事、活动资讯、产品推广等）、核心信息层级（主标题→子标题→关键论点→案例/数据→总结）及情绪基调（严肃专业/轻松活泼/温暖治愈/紧迫促销等）。
•标注需重点突出的内容（如金句、数据、行动号召），识别用户已手动标注的关键元素（如加粗/变色文字），避免重复设计。
2. ​风格与品牌适配​（核心要求）
•基于用户提供的「品牌规范」（如主色调、辅助色、品牌字体、LOGO位置、固定头图/尾图模板等）调整排版，优先使用用户指定的视觉元素（例：若用户要求「标题用#FF6B6B色号+18px思源黑体」，则严格执行）。
•若无明确品牌规范，根据内容类型与目标受众自动匹配通用风格：
•干货文：简洁清晰，侧重信息分层（多用标题分级、列表/表格、重点框）；
•情感文：温暖治愈，侧重留白与节奏（多用短段落、插画/软图、字体倾斜/颜色渐变）；
•资讯文：高效直观，侧重信息密度（多用时间轴、要点卡片、关键数据高亮）；
•推广文：吸引转化，侧重行动引导（多用按钮样式、限时标签、对比排版）。
3. ​视觉元素设计​（细节执行）
•标题体系​：主标题（14-18px，加粗/品牌色，居中/左对齐）；副标题（14px，浅色系，与主标题间距1.5倍行距）；小标题（16px，品牌色/深灰，加粗，段落前空一行）。
## 正文排版​：
•字体：默认使用微信默认字体（苹方/微软雅黑），用户指定字体时优先调用（需检查是否兼容手机端）；
•字号：正文14-16px（手机端最佳阅读尺寸），重点句16-18px；
•行距：1.5-1.8倍（避免过密或松散）；
•段落：每段不超过3行（手机屏幕宽度限制），段落间空1行；
•重点突出：金句用引用块/背景色块（#F8F8F8）+ 加粗；数据用「数字+单位」大字号（如「30%↑」）；
## 图文搭配​：
•图片：自动建议插入位置（如长段落后、数据前、情感高潮处），推荐尺寸（900×600px，避免变形），提示用户「此处可插入相关插画/实拍图提升代入感」；
•分割线：长内容每300-500字插入1条分割线（浅灰色细线/品牌色虚线）；
•引导语：开头添加「点击上方【XX】关注，不错过每篇深度好文」（用户可自定义），结尾添加「点击在看/分享给需要的朋友」「评论区聊聊你的看法」等互动话术。
4. ​平台规则校验​（合规保障）
•自动规避微信公众平台敏感词/违规内容（如过度营销、虚假宣传），标注风险点并建议修改；
•限制特殊符号（如❌❗️）使用频率（每1000字不超过3处），避免影响阅读流畅性；
•检查图片/链接有效性（提示用户「图2链接失效，需替换」），确保排版在手机端预览无错位。
## ​交互要求​（灵活响应）
- 主动询问用户需求：若信息不明确（如未提供品牌色、内容类型模糊），需提问确认（例：「您希望文章整体风格更偏向专业严谨还是轻松活泼？」「主色调是否有指定色号？」）；
- 如果用户提出了排版需求，你要主动询问用户的排版风格需求，确认之后再开始排版
- 提供备选方案：针对关键设计（如标题样式、配色），输出2-3种选项（例：「方案一：标题用红色加粗居中；方案二：标题用深蓝渐变左对齐」），并说明适用场景；
- 支持动态调整：用户反馈「重点句不够突出」时，快速优化（如将普通加粗改为背景色块+加大字号），并解释调整逻辑（例：「背景色块能更好的隔离内容，提升视觉焦点」）。
## ​输出规范​
- 最终输出包含：排版后的文字（使用HTML标签格式，如<h1>标题</h1>、<p><strong>重点句</strong></p>、<img src="图1" alt="描述">）+ 视觉说明（例：「标题使用18px#FF6B6B色号，居中对齐；正文每段间插入浅灰分割线」）+ 手机端预览效果描述（例：「首屏显示主标题+引言，滑动3屏后出现第一个重点框」）；•
附加「优化建议」模块（例：「第二段数据较多，建议用表格整理；结尾互动话术可替换为'点击收藏，下次查看更方便'提升留存」）。

重要提醒：
1. 必须生成完整的HTML代码，不能中途截断
2. HTML代码必须使用\`\`\`html代码块格式包裹
3. 确保HTML结构完整，包含所有必要的闭合标签
4. 如果内容较长，请确保生成完整的HTML，不要因为长度限制而截断
5. 生成的HTML应该可以直接在微信公众号中使用
`

// 调用 Deepseek API
async function fetchDeepseekStream(messages: Message[], model: DeepSeekModel = "deepseek-reasoner"): Promise<ReadableStream> {
	if (!process.env.DEEPSEEK_API_KEY) {
		throw new Error("Deepseek API key not found in environment variables.")
	}

	// 添加系统提示词
	const messagesWithSystemPrompt = [{ role: "system" as const, content: HTML_SYSTEM_PROMPT }, ...messages.map(({ id, ...rest }) => rest)]

	console.log("使用模型:", model)
	console.log("API Key存在:", !!process.env.DEEPSEEK_API_KEY)

	const stream = await deepseek.chat.completions.create({
		model: model,
		messages: messagesWithSystemPrompt as any,
		stream: true,
		max_tokens: 8192, // 增加token限制，支持更长的HTML内容
		temperature: 0.7
	})

	// 将 OpenAI SDK 的流转换为标准的 ReadableStream
	const readableStream = new ReadableStream({
		async start(controller) {
			const encoder = new TextEncoder()
			let thinkingContent = ""

			for await (const chunk of stream) {
				const content = chunk.choices[0]?.delta?.content || ""
				const delta = chunk.choices[0]?.delta as any
				const reasoningContent = delta?.reasoning_content || ""
				const finishReason = chunk.choices[0]?.finish_reason

				// 调试日志 - 只在有reasoning_content或content时输出
				if (reasoningContent || content) {
					console.log("完整chunk:", JSON.stringify(chunk, null, 2))
				}
				if (reasoningContent) {
					console.log("收到reasoning_content内容:", reasoningContent)
				}
				if (content) {
					console.log("收到content内容:", content)
				}

				// 处理reasoning_content内容
				if (reasoningContent) {
					thinkingContent += reasoningContent
					// 发送thinking内容
					controller.enqueue(encoder.encode(`<thinking>${reasoningContent}</thinking>`))
				}

				// 处理正常内容
				if (content) {
					controller.enqueue(encoder.encode(content))
				}
			}
			controller.close()
		}
	})

	return readableStream
}

// SiliconFlow 支持的模型配置
const SILICONFLOW_MODELS = {
	// Qwen 系列 - 推荐用于中文对话
	"qwen2.5-7b": "Qwen/Qwen2.5-7B-Instruct",
	"qwen2-7b": "Qwen/Qwen2-7B-Instruct",
	"qwen2-1.5b": "Qwen/Qwen2-1.5B-Instruct",
	"qwen1.5-7b": "Qwen/Qwen1.5-7B-Chat",
	// GLM 系列 - 清华智谱AI
	"glm4-9b": "THUDM/glm-4-9b-chat",
	"chatglm3-6b": "THUDM/chatglm3-6b"
} as const

// 调用 SiliconFlow API
async function fetchSiliconFlowStream(messages: Message[]): Promise<ReadableStream> {
	if (!process.env.SILICONFLOW_API_KEY) {
		throw new Error("SiliconFlow API key not found in environment variables.")
	}

	// 从环境变量读取模型配置，默认使用 qwen2.5-7b
	const modelKey = (process.env.SILICONFLOW_MODEL as keyof typeof SILICONFLOW_MODELS) || "qwen2.5-7b"
	const selectedModel = SILICONFLOW_MODELS[modelKey]

	if (!selectedModel) {
		console.warn(`Unknown SiliconFlow model: ${modelKey}, falling back to qwen2.5-7b`)
	}

	// 添加系统提示词
	const messagesWithSystemPrompt = [{ role: "system" as const, content: HTML_SYSTEM_PROMPT }, ...messages.map(({ id, ...rest }) => rest)]

	const stream = await siliconflow.chat.completions.create({
		model: selectedModel || SILICONFLOW_MODELS["qwen2.5-7b"],
		messages: messagesWithSystemPrompt as any,
		stream: true,
		max_tokens: 8192, // 增加token限制，支持更长的HTML内容
		temperature: 0.7
	})

	// 将 OpenAI SDK 的流转换为标准的 ReadableStream
	const readableStream = new ReadableStream({
		async start(controller) {
			const encoder = new TextEncoder()
			for await (const chunk of stream) {
				const content = chunk.choices[0]?.delta?.content || ""
				if (content) {
					controller.enqueue(encoder.encode(content))
				}
			}
			controller.close()
		}
	})

	return readableStream
}

/**
 * AI 响应总调度函数
 * @param messages 对话历史
 * @param api 选定的 AI 服务商
 * @param deepSeekModel DeepSeek模型选择
 * @returns 一个 ReadableStream 用于流式传输 AI 响应
 */
export async function streamAIResponse(
	messages: Message[],
	api: ApiProvider,
	deepSeekModel: DeepSeekModel = "deepseek-reasoner"
): Promise<ReadableStream> {
	const lastUserMessage = messages[messages.length - 1]?.content || ""

	switch (api) {
		case "Deepseek":
			return fetchDeepseekStream(messages, deepSeekModel)

		case "SiliconFlow":
			return fetchSiliconFlowStream(messages)

		default:
			// 对于其他 API，暂时返回模拟数据
			return getMockResponse(api, lastUserMessage)
	}
}
